<script lang="ts">
import { autoprefixer } from "@/utils/util";
import { transform } from "lodash";
import {
  computed,
  CSSProperties,
  defineComponent,
  getCurrentInstance,
  inject,
  reactive,
} from "vue";
import type { InjectCarouselScope, ICarouselItemProps } from "./carousel";
const CARD_SCALE = 0.83;
export default defineComponent({
  name: "ElCarouselItem",
  props: {
    name: { type: String, default: "" },
    label: {
      type: [String, Number],
      default: "",
    },
  },
  setup(props: ICarouselItemProps) {
    const instance = getCurrentInstance();
    instance.uid;
    const data = reactive({
      hover: false,
      translate: 0,
      scale: 1,
      active: false,
      ready: false,
      inStage: false,
      animating: false,
    });

    const injectCarouselScope: InjectCarouselScope = inject(
      "injectCarouselScope"
    );

    const parentDirection = computed(() => {
      return injectCarouselScope.direction;
    });

    const itemStyle = computed(() => {
      const translateType =
        parentDirection.value === "vertical" ? "translateY" : "translateX";
      const value = `${translateType}(${data.translate}px) scale(${data.scale})`;
      const style: CSSProperties = {
        transform: value,
      };
      return autoprefixer(style);
    });

    function processIndex(index, activeIndex, length) {
      if (activeIndex === 0 && index === length - 1) {
        return -1;
      } else if (activeIndex === length - 1 && index === 0) {
        return length;
      } else if (index < activeIndex - 1 && activeIndex - index >= length / 2) {
        return length + 1;
      } else if (index > activeIndex + 1 && index - activeIndex >= length / 2) {
        return -2
      }
      return index
    }

    function calcCardTranslate(index,activeIndex){
      const parentWidth = injectCarouselScope.root.value?.offsetWidth || 0
    }
  },
});
</script>
